<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="page-content">
        <div class="table-responsive page-content">
            <form class="form-inline">
                <input type="hidden" id="userId">
                <label for="role_name">角色名:</label>
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="input-medium" id="modal_role_name">
                    </div>
                </div>
                <button type="button" id="searchBtn_modal" class="btn btn-info btn-xs">
                    <i class="icon-eye-open"></i>
                    查询
                </button>
            </form>
            <div class="space-4"></div>
            <!-- table start -->
            <table class="table-list table-hover" id="modal_role_list"></table>
            <div class="pager" id="modal_role_page"></div>
        </div>
    </div>
</div>

<script>
    role_options = {
        url: '${request.contextPath}/sys/user/doRoleList.do',
        page: true,
        params: {
            pageSize: 5,
            id: $('#userId').val()
        },
        key: 'id',
        index: true,
        cont: 'modal_role_page',
        column: [{
            name: 'roleName',
            title: '角色名称',
            width: 70,
            align: 'center'
        }, {
            name: 'roleCode',
            title: '角色编码',
            width: 70,
            align: 'center'
        }, {
            name: 'createTime',
            title: '创建时间',
            width: 130,
            align: 'center',
            render: function (value) {
                if (value) {
                    return formatTime(value.time)
                }
                return '无时间'
            }
        }, {
            name: 'exits',
            title: '状态',
            width: 60,
            align: 'center',
            render: function (value) {
                if (value) {
                    return '<span class="text-success"><strong>已拥有</strong></span>';
                }
                return '<span class="text-danger"><strong>未拥有</strong></span>';
            }
        }, {
            name: 'id',
            title: '操作',
            width: 60,
            align: 'center',
            render: function (value, data) {
                var operate = '<div class="btn-group">';
                if (data.exits) {
                    // 删除按钮
                    operate += '<button class="btn btn-xs btn-danger" onclick=revokeRole("' + value + '","' + data.roleName + '")> <i class="icon-trash bigger-120"></i> </button>';
                } else {
                    // 删除按钮
                    operate += '<button class="btn btn-xs btn-success" onclick=grantRole("' + value + '","' + data.roleName + '","' + data.roleCode + '")> <i class="icon-ok bigger-120"></i> </button>';
                }
                operate += '</div>';
                return operate;
            }
        }]
    };
    setTimeout(function () {
        reinitTreeHight(window.parent.getIframeByElement(document.body));
    }, 200);

    // 点击搜索按钮
    $('#searchBtn_modal').click(function () {
        role_options.params.roleName = $('#modal_role_name').val();
        $('#modal_role_list').table(role_options);
    });

    function grantRole(roleId, roleName, roleCode) {
        layer.confirm('是否确认要授予该角色:[<span class="text-primary"><strong>' + roleName + '</strong></span>]？', {
            btn: ['确认', '取消'] //按钮
        }, function (index) {
            //进行ajax传值
            $.ajax({
                url: "${request.contextPath}/sys/user/userRoleGrant.do",
                type: "post",
                dataType: "json",
                data: {
                    'userId': $("#userId").val(),
                    'roleId': roleId,
                    'roleName': roleName,
                    'roleCode': roleCode,
                    'grant': true
                },
                success: function (msg) {
                    //要执行的代码
                    if (!msg.success) {
                        layer.msg(msg.msg, {icon: 2});
                        return;
                    }
                    // 注册成功,跳转到学员信息补全页面
                    layer.msg("授权成功", {icon: 6, time: 500}, function () {
                        $('#modal_role_list').table(role_options);
                    });
                }
            });
            layer.close(index);
        });
    }

    function revokeRole(roleId, roleName) {
        layer.confirm('是否确认要撤销该角色:[<span class="text-danger"><strong>' + roleName + '</strong></span>]？', {
            btn: ['确认', '取消'] //按钮
        }, function (index) {
            //进行ajax传值
            $.ajax({
                url: "${request.contextPath}/sys/user/userRoleGrant.do",
                type: "post",
                dataType: "json",
                data: {
                    'userId': $("#userId").val(),
                    'roleId': roleId,
                    'grant': false
                },
                success: function (msg) {
                    //要执行的代码
                    if (!msg.success) {
                        layer.msg(msg.msg, {icon: 2});
                        return;
                    }
                    // 注册成功,跳转到学员信息补全页面
                    layer.msg("撤销成功", {icon: 6, time: 500}, function () {
                        $('#modal_role_list').table(role_options);
                    });
                }
            });
            layer.close(index);
        });
    }
</script>